<!-- 新增与编辑门店 -->
<template>
  <el-dialog :title="modalData.title" :visible.sync="dialog.show" center width="530px" height="400px" custom-class="mydialog" append-to-body @close="handleClose">

    <div class="dialog-content">
      <el-form ref="formsku" :model="form" :rules="rules" label-width="150px" >
        <el-form-item label="分类：" prop="classification">
          <el-select v-model="form.classification" placeholder="" class="seach-select" size="small">
            <!-- <el-option v-for="item in form.type_options" :key="item.value" :label="item.label" :value="item.value"/> -->
            <el-option v-for="item in modalStaticData.sorts" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="品类：" prop="category">
          <el-select v-model="form.category" placeholder="" value-key="categoryName" filterable class="seach-select" size="small">
            <el-option v-for="item in modalStaticData.masterCategoryList" :key="item.categoryId" :label="item.categoryName" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌：" prop="lianbaoBrand">
          <el-select v-model="form.lianbaoBrand" value-key="brandName" placeholder="" filterable class="seach-select" size="small">
            <el-option v-for="item in modalStaticData.lianbaoBrandList" :key="item.brandId" :label="item.brandName" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="SKU名称：" prop="skuName">
          <el-input v-model="form.skuName" maxlength="50" />
        </el-form-item>
        <el-form-item label="出货方式：" prop="salesType">
          <el-select v-model="form.salesType" placeholder="" class="seach-select" size="small">
            <el-option v-for="item in salesTypeList" :key="item.salesType" :label="item.salesTypeName" :value="item.salesType"/>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商：" prop="supplier">
          <el-select v-model="form.supplier" value-key="supplierName" placeholder="" filterable class="seach-select" size="small">
            <el-option v-for="item in modalStaticData.supplierList" :key="item.supplierId" :label="item.supplierName" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="国际条码：" >
          <el-input v-model="form.internationalBarcode" maxlength="50" />
        </el-form-item>
        <el-form-item label="采购单价：" prop="purchasePrice">
          <el-input v-model="form.purchasePrice"/>
        </el-form-item>
        <!--        <el-form-item label="商城成本价：" prop="mallCostPrice">-->
        <!--          <el-input v-model="form.mallCostPrice"/>-->
        <!--        </el-form-item>-->
        <!-- <el-form-item label="服务星号：" >
          <el-input v-model="form.start"/>
        </el-form-item> -->
        <el-form-item prop="status" label="状态：">
          <el-select v-model="form.status" placeholder="" class="seach-select" size="small">
            <el-option v-for="item in modalStaticData.statusList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="重量：" >
          <el-input v-model="form.weightDescription" maxlength="50" />
        </el-form-item>
        <el-form-item label="体积：" >
          <el-input v-model="form.volumeDescription" maxlength="50" />
        </el-form-item>
        <el-form-item label="单位：" >
          <el-input v-model="form.unit" maxlength="50" />
        </el-form-item>
        <el-form-item v-if="modalData.type==='creat'" label="采购公司：" prop="purchaseCompany">
          <el-select v-model="form.purchaseCompany" value-key="purchaseCompany" placeholder="" filterable class="seach-select" size="small">
            <el-option v-for="item in companyList" :key="item.purchaseCompany" :label="item.purchaseCompany" :value="item.purchaseCompany"/>
          </el-select>
        </el-form-item>
        <el-form-item label="规格：" >
          <el-input v-model="form.specifications" maxlength="50" />
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt bt-wd" type="primary" @click="saveFun('formsku')">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>

import {
  post, get
} from '@/api/utils'
export default{
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      title: '',
      default: () => {}
    }

  },
  data() {
    var validateMallCostPrice = (rule, value, callback) => {
      // console.log('--')
      var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的价格'))
      }
    }

    return {
      dialog: {
        show: true
      },
      companyList: [],
      salesTypeList: [{ 'salesTypeName': '供应商代发', 'salesType': 1 }, { 'salesTypeName': '仓库自发', 'salesType': 2 }],
      form: {
        classification: '', categoryId: null, category: null, lianbaoBrand: null,
        supplier: null, skuName: '', paking: '', paking_options: [], purchasePrice: null, purchaseCompany: null,
        person: '', person_options: [], interCode: '', price: '', start: '', salesType: '',
        status: '', status_options: [], weightDescription: null, volumeDescription: null, unit: null
      },
      rules: {
        classification: [
          { required: true, message: '请选择分类', trigger: 'change' }

        ],
        category: [
          { required: true, message: '请选择品类', trigger: 'change' }
        ],
        lianbaoBrand: [
          { required: true, message: '请选择品牌', trigger: 'change' }
        ],
        salesType: [
          { required: true, message: '请选择出货方式', trigger: 'change' }
        ],
        supplier: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ],
        skuName: [
          { required: true, message: '请输入sku名称', trigger: 'blur' },
          { max: 50, message: '长度在 50 个字符内', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择供状态', trigger: 'change' }
        ],
        // mallCostPrice: [
        //   { validator: validateMallCostPrice, trigger: 'blur' }
        // ],
        purchasePrice: [
          { required: true, validator: validateMallCostPrice, trigger: 'blur' }
        ],
        purchaseCompany: [
          { required: true, message: '添加采购公司', trigger: 'blur' }
        ]

      }

    }
  },
  created: function() {
    if (this.modalData.sku) {
      var row = this.modalData.sku
      this.form.skuName = row.skuName
      this.form.category = { categoryId: row.categoryId, categoryName: row.categoryName }
      this.form.supplier = { supplierId: row.supplierId, supplierName: row.supplierName }
      this.form.classification = row.classification + ''
      // this.form.mallCostPrice = row.mallCostPrice
      this.form.purchasePrice = row.purchasePrice
      this.form.salesType = row.salesType
      this.form.status = row.status + ''
      this.form.internationalBarcode = row.internationalBarcode
      this.form.weightDescription = row.weightDescription
      this.form.volumeDescription = row.volumeDescription
      this.form.unit = row.unit
      this.form.lianbaoBrand = { brandName: row.brandName, brandId: row.brandId }
      this.form.specifications = row.specifications
      this.form = Object.assign({}, this.form, {})
    }
    this.getlistCompany()
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getlistCompany() {
      if (this.modalData.type === 'creat') {
        var data = {}
        get('/wxh-cloud-rest/rest/', '/pas/sku/listCompany', data).then(response => {
          if (response.data.status === 'success') {
            this.companyList = response.data.data.company
          } else if (response.data.status === 'faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
      }
    },

    saveFun(formName) {
      const self = this
      // console.log(formName)
      // console.log(self.$refs[formName])
      self.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid)
          var form = this.form

          var data = { 'skuName': form.skuName, 'categoryId': form.category.categoryId, 'categoryName': form.category.categoryName, 'supplierId': form.supplier.supplierId, 'supplierName': form.supplier.supplierName,
            'classification': form.classification, 'mallCostPrice': form.mallCostPrice, 'salesType': form.salesType, 'brandName': form.lianbaoBrand.brandName, 'brandId': form.lianbaoBrand.brandId,
            'status': form.status, 'internationalBarcode': form.internationalBarcode, 'purchasePrice': form.purchasePrice, 'weightDescription': form.weightDescription, 'volumeDescription': form.volumeDescription, 'unit': form.unit,
            'purchaseCompany': form.purchaseCompany, 'specifications': form.specifications
          }

          var url = '/pas/sku/add'
          if (this.modalData.sku && this.modalData.sku.skuId && this.modalData.sku.skuId > 0) {
            data.skuId = this.modalData.sku.skuId
            url = '/pas/sku/update'
          }

          post('/wxh-cloud-rest/rest/', url, data).then(response => {
            if (response.data.status === 'success') {
              console.log(response)
              this.$message({
                message: response.data.messge
              })
              this.modalStaticData.closeChildAndRefresh()
            }
          }).catch(error => {
            console.log(error)
            this.$message({
              message: '数据加载失败',
              type: 'warning'
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
